import Taro, {Component, Config} from '@tarojs/taro'
import { View, Textarea } from '@tarojs/components'
import { SDBody } from 'sudao-ui'

import './index.less'
import SDButton from "../../../../comps/sd-button";

type PageState = {
  currentCount: number
}

export default class MessageFeedbackDetailPage extends Component<{}, PageState> {

  config: Config = {
    navigationBarTitleText: '消息详情'
  }

  constructor () {
    super(...arguments)
    this.state = {
      currentCount: 0
    }
  }

  render () {
    const { statusBarHeight, platform } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0

    const { currentCount } = this.state


    return (
      <SDBody sd-class='container'>
        <View className="section-top">
          <View className="cell-item border-bottom_1px">
            <View className="cell-title">拜访类型</View>
            <View className="cell-subtitle">实地拜访</View>
          </View>
          <View className="cell-item border-bottom_1px">
            <View className="cell-title">签到时间</View>
            <View className="cell-subtitle">2018-06-22 14:22</View>
          </View>
          <View className="cell-item">
            <View className="cell-title">拜访客户</View>
            <View className="cell-subtitle">永恒银饰品店</View>
          </View>
        </View>
        <View className="section-pannel">
          <View className="pannel-title">评价BD</View>
          {
            // @ts-ignore
            <Textarea className={`input-text ${platform.toLowerCase().indexOf('ios') < 0 ? '' : 'input-text_ios'}`}
                      maxlength={500}
                      placeholder='请填写反馈内容（最多500字）'
                      placeholderStyle='color:#999;'
                      onInput={this.onInputValueChange} />
          }
          <View className="tips-content">
            <View className="tips-title">{currentCount}/500</View>
          </View>
        </View>

        <View style='height:118rpx;'></View>
        <View className="fixed-bottom border-top_1px">
          <View className="bottom-bar">
            <SDButton height={96} sd-class='btn-payment' onClick={this.doSubmit}>提交</SDButton>
          </View>
          <View style={`height: ${bottomH}px;`}></View>
        </View>
      </SDBody>
    )
  }

  onInputValueChange = e => {
    let count = (e.detail.value || '').length
    this.setState({
      currentCount: count
    })
  }

  doSubmit = () => {

  }
}
